<template>
  <div class="sidebar">
    <div class="content">
      <el-scrollbar style="height: 100%">
        <el-menu @select="setActive" :default-active="activeId">
          <el-submenu index="-3">
            <template slot="title">
              <span>客户池</span>
              <span style="position: absolute; right: 30px">
                <i
                  class="V7_iconfont V7_iconV7tubiao_tianjiakehu"
                  style="font-size: 12px; color: #b3b9c7; margin-right: 4px"
                  v-functions="['customer_insert']"
                  @click.stop="openDrawer"
                ></i>
                <span @click.stop>
                  <el-dropdown
                    trigger="click"
                    @command="handleCommand"
                    v-if="operateList && operateList.length"
                  >
                    <i
                      class="el-icon-more-outline"
                      style="font-size: 12px; color: #b3b9c7"
                    ></i>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        v-for="item in operateList"
                        :key="item.id"
                        :command="item"
                      >
                        {{ item.name }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </span>
              </span>
            </template>
            <el-menu-item
              v-show="showAuth"
              v-for="item in customerList"
              :key="item._id"
              :index="item._id"
            >
              <el-tooltip
                effect="dark"
                :content="item.name"
                placement="top-start"
              >
                <span>{{ item.name }}</span>
              </el-tooltip>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
    </div>
    <commonDrawer
      title="新增客户"
      :drawer="drawer"
      :size="700"
      :isShowMoreBtn="true"
      @closeDraw="closeDraw"
      @cancelFun="closeDraw"
      @save="save"
    >
      <template slot="column">
        <AddCustomer
          ref="AddCustomer"
          :afterShow="false"
          @addUpdateTableList="addUpdateTableList"
        ></AddCustomer>
      </template>
    </commonDrawer>
    <ImportCustomer ref="ImportCustomer"></ImportCustomer>
  </div>
</template>

<script lang="ts">
/**
 * 客户侧边栏选择
 */
import { commonAction, isHasFuncOrMenus } from '@/utils/common'
import { Component, Vue, Ref } from 'vue-property-decorator'
import AddCustomer from '../drawer/addCustomer.vue'
import commonDrawer from '@/components/globalTool/resizeDrawer/drawer.vue'
import { checkPermission } from '@/utils/directive'
import ImportCustomer from './importCustomer.vue'
@Component({
  name: 'SideBar',
  components: { AddCustomer, commonDrawer, ImportCustomer }
})
export default class SideBar extends Vue {
  [x: string]: any
  @Ref() private readonly AddCustomer
  @Ref() private readonly ImportCustomer // 导入
  private customerList: any = []
  private activeId: any = ''
  private drawer: boolean = false // 新增抽屉
  private showAuth: boolean = true

  private operateList: any = [
    {
      name: '批量导入',
      id: 'customer_import'
    }
  ]

  private setActive (index) {
    this.$emit('current', index)
  }

  private async openDrawer () {
    this.drawer = true
    this.$nextTick(() => {
      this.AddCustomer.initData()
    })
  }

  private closeDraw () { // 关闭抽屉
    this.drawer = false
  }

  private save () {
    this.$nextTick(() => {
      this.AddCustomer.saveForm()
    })
  }

  private handleCommand (val: any) {
    if (val.id === 'customer_import') {
      this.ImportCustomer.clearData()
      this.ImportCustomer.openDraw()
    }
  }

  private addUpdateTableList () {
    this.drawer = false
    this.$emit('addUpdateTableList')
  }

  private getFilterSide () { // 获取过滤器列表-导航
    const params = {
      url: '/server-crm/action/customer/common/filters',
      method: 'GET'
    }
    commonAction(params).then(async res => {
      if (res.success) {
        this.customerList = res.data
        if (this.customerList && this.customerList.length) {
          this.activeId = this.customerList[0]._id
          this.setActive(this.activeId)
        }
      }
    })
  }

  private mounted () {
    if (checkPermission(null, { value: ['customer_pool'] }, 'limits')) {
      this.showAuth = true
    } else {
      this.showAuth = false
    }
    this.operateList = this.operateList.filter(item => isHasFuncOrMenus(item.id, this.$store.state.common.session.user, false)) // 操作权限过滤
    this.getFilterSide()
  }
}
</script>

<style lang="stylus" scoped>
>>> .el-menu-item
  width 100%
  overflow hidden
  word-break keep-all
  white-space nowrap
  text-overflow ellipsis
>>> .drawer-contain
  padding 0 24px 30px !important
.sidebar
  width 150px
  margin-right 20px
  box-sizing border-box
  border 1px solid #ecf0f3
  box-shadow 0px 0px 4px 0px #e0e6f0,0px 1px 4px 0px #e0e6f0
  border-radius 10px
  overflow hidden
  /deep/ .el-submenu__title
    font-size 12px !important
    height 44px
    line-height 44px
    font-weight bold
    color #000
  /deep/ .el-menu-item
    font-size 12px !important
    color $fc-gray
    text-align left
    height 45px
    line-height 45px
    min-width 100%
    font-weight normal
  /deep/ .el-menu-item.is-active
    color $c-main
    background #E5F3FD
  .option
    height 40px
    line-height 40px
    display flex
    border 1px solid #ecf0f3
  .content
    height calc(100% - 40px)
    overflow hidden
    .menu
      line-height 40px
      font-weight 400
      color #303753
      font-size 12px
      padding 0px 16px
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      border-left 4px solid transparent
      cursor pointer
    .menuon
      background #e5f3fd
      border-left-color $c-main
</style>
